<template>
  <div class="InviteFriendsFemale">
    <div class="messageBox">
      <marqueeLeft :sendVal="lotteryAllList"></marqueeLeft>
    </div>
    <div class="yaoqingBox">
      <img src="../assets/image/yaohaoyou.png" alt="" />
    </div>
    <div class="liwuBox">
      <img src="../assets/image/liwu.png" alt="" />
    </div>

    <div class="locationBox">
      <div class="shareRewards">
        <div class="shareRewards_text">
          <img src="../assets/image/yicifenxiang.png" alt="" />
        </div>
        <!-- <div class="shareRewards_grade">
          <div class="shareRewards_grade_one">
            好友注册奖励<br />最高888宝石
          </div>
          <div class="shareRewards_grade_two">
            好友充值奖励<br />10%收益宝石
          </div>
        </div>

        <div class="shareRewards_grade">
          <div class="shareRewards_grade_three">
            邀请姐妹团最高<br />奖励15%收益宝石
          </div>
          <div class="shareRewards_grade_four">
          
          </div>
        </div> -->
        <div class="wenanbox">
          <p><span>一重奖：</span>好友每次充值，奖励您5%宝石</p>
          <p><span>二重奖：</span>好友获得宝石收益，奖励您10%宝石</p>
        </div>
      </div>
    </div>

    <div class="invitationCodeBox">
      <div class="code">
        <span class="code_span">邀请码:</span>
        <!-- <input type="text" :value="this.promoteCode" id="form_tone" disabled /> -->
        <p class="inviteCode" id="inviteCode">
          {{ promoteCode }}
        </p>
        <span class="code_span code_button" @click="copyCode">
          <img src="../assets/image/copy.png" alt="" />
        </span>
      </div>
      <div class="shareBox">
        <span class="share_button" @click="shareLink">链接分享</span>
        <span class="share_button" @click="sharePosters">海报分享</span>
      </div>
    </div>

    <div id="tab">
      <div class="tab-bar clearfix">
        <a
          href="javascript:;"
          @click="tab(index)"
          v-for="(item, index) in items"
          :class="{ active: index === curId }"
          :key="index"
          >{{ item.item }}</a
        >
      </div>
      <div class="tab-con">
        <div class="tab-con-div" v-show="curId === 0">
          <div class="profitBox">
            <div class="profitBox_one">
              <p class="profitBox_one_1P">
                今日收益:<span style="font-weight: 700">{{
                  todayReward ? todayReward : 0
                }}</span
                ><img
                  class="profitBox_one_1P_img"
                  src="../assets/image/baoshi.png"
                  alt=""
                />
              </p>
              <div class="profitBox_one_2P">
                <p>
                  总收益:<span style="font-weight: 700">{{ totalComis }}</span
                  ><img
                    class="profitBox_one_2P_img"
                    src="../assets/image/baoshi.png"
                    alt=""
                  />
                </p>
                <p class="profitBox_one_2P_btn" @click="nowWithdrawal">
                  立即提现
                </p>
              </div>
            </div>
            <div v-if="profitList.length != 0">
              <div
                class="profitListBox"
                v-for="(i, profitListIndex) in profitList"
                :key="profitListIndex"
              >
                <p class="profitListBox_P">{{ i.createTime | time }}</p>
                <div class="profitListBox_div">
                  <p class="profitListBox_div_1p">{{ i.mark }}</p>
                  <p class="profitListBox_div_2p">
                    {{ "+" + i.diamond }}
                    <img src="../assets/image/baoshi.png" alt="" />
                  </p>
                </div>
              </div>
            </div>
            <div v-else class="kongtxt">
              <span class="txt11" @click="shareLink">邀请好友</span>
              <span>获得收益</span>
            </div>
          </div>
        </div>

        <div class="tab-con-div" v-show="curId === 1">
          <div class="yaoqingListBox">
            <div class="yaoqingListBox_total">
              <div class="yaoqingListBox_total_one">
                <p>今日邀请人数:{{ todayCount }}</p>
                <p>总邀请人数:{{ totalPromote }}</p>
              </div>
            </div>
            <!-- <div class="sisterGroupBox">
              <p class="sisterGroupBox_name">姐妹团:</p>
              <p class="sisterGroupBox_num">
                <span>邀请姐姐:{{ eldSisterCount }}人</span>
                <span>邀请妹妹:{{ sisterCount }}人</span>
              </p>
            </div> -->

            <div class="infoBox">
              <div
                class="infoBox_one"
                v-for="(i, classIndex) in infoList"
                :key="classIndex"
              >
                <div class="item">
                  <div class="infoBox_one_img">
                    <img class="imgA" :src="i.headimg" alt="" />
                    <span @click="classBtn(i.promoteId)"
                      >{{ i.nickName }}
                      <img
                        v-if="i.sex == 2"
                        class="img"
                        src="../assets/image/nvIcon.png"
                        alt="" />
                      <img
                        v-if="i.sex == 1"
                        class="img"
                        src="../assets/image/manIcon.png"
                        alt=""
                    /></span>
                  </div>
                  <div class="infoBox_one_name">
                    <!-- <p class="infoBox_one_name_1P" v-if="i.sex == 2">
                      {{ "姐姐" }}
                    </p> -->
                    <p class="infoBox_one_name_1P1">
                      {{ "好友" }}
                    </p>
                    <p class="infoBox_one_name_2P">{{ i.createTime | time }}</p>
                  </div>
                </div>

                <div v-if="classNum == i.promoteId">
                  <div
                    class="infoBox_oneA"
                    v-for="(j, index) in infoListA"
                    :key="index"
                  >
                    <div class="item">
                      <div class="infoBox_one_imgA">
                        <img class="imgA" :src="j.headimg" alt="" />
                        <span
                          >{{ j.nickName }}
                          <img
                            v-if="j.sex == 2"
                            class="img"
                            src="../assets/image/nvIcon.png"
                            alt="" />
                          <img
                            v-if="j.sex == 1"
                            class="img"
                            src="../assets/image/manIcon.png"
                            alt=""
                        /></span>
                      </div>
                      <div class="infoBox_one_nameA">
                        <p class="infoBox_one_name_1P" v-if="j.sex == 2">
                          {{ "妹妹" }}
                        </p>
                        <p class="infoBox_one_name_1P1" v-if="j.sex == 1">
                          {{ "好友" }}
                        </p>
                        <p class="infoBox_one_name_2P">
                          {{ j.createTime | time }}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="kongBox" v-if="infoList == ''">
            <div>
              <img src="../assets/image/kong.png" alt="" />
              <p>这里空空如也</p>
            </div>
          </div>
        </div>

        <div class="tab-con-div" v-show="curId === 2">
          <div class="rankingBox">
            <div class="rankingBox__one">
              <div class="rankingBox_left">
                <img
                  class="imgB"
                  v-if="agent.rk == 1"
                  src="../assets/image/RankingOne.png"
                  alt=""
                />
                <img
                  class="imgB"
                  v-else-if="agent.rk == 2"
                  src="../assets/image/RankingTwo.png"
                  alt=""
                />
                <img
                  class="imgB"
                  v-else-if="agent.rk == 3"
                  src="../assets/image/RankingThree.png"
                  alt=""
                />
                <p
                  v-else-if="agent.rk <= 20 && agent.rk > 0"
                  class="rankingBox_left_p"
                >
                  {{ agent.rk }}
                </p>
                <img class="imgA" :src="agent.headimg" alt="" />
                <span
                  >{{ "我" }}
                  <img
                    v-if="agent.sex == 2"
                    class="img"
                    src="../assets/image/nvIcon.png"
                    alt="" />
                  <img
                    v-if="agent.sex == 1"
                    class="img"
                    src="../assets/image/manIcon.png"
                    alt=""
                /></span>
              </div>
              <div class="rankingBox_right">
                获得{{ agent.total_comis
                }}{{
                  agent.sex == "1" ? "金币" : agent.sex == "2" ? "宝石" : ""
                }}
              </div>
            </div>

            <div
              class="rankingBox__oneA"
              v-for="(i, rankingIndex) in rankingList"
              :key="rankingIndex"
            >
              <div class="rankingBox_leftA">
                <p class="rankingBox_left_pA" v-if="rankingIndex >= 3">
                  {{ rankingIndex + 1 }}
                </p>
                <img
                  class="rankingImg"
                  v-if="rankingIndex == 0"
                  src="../assets/image/RankingOne.png"
                  alt=""
                />
                <img
                  class="rankingImg"
                  v-if="rankingIndex == 1"
                  src="../assets/image/RankingTwo.png"
                  alt=""
                />
                <img
                  class="rankingImg"
                  v-if="rankingIndex == 2"
                  src="../assets/image/RankingThree.png"
                  alt=""
                />

                <img class="imgA" :src="i.headimg" alt="" />
                <span>
                  {{ i.nickName }}
                  <img
                    v-if="i.sex == 2"
                    class="img"
                    src="../assets/image/nvIcon.png"
                    alt=""
                  />
                  <img
                    v-if="i.sex == 1"
                    class="img"
                    src="../assets/image/manIcon.png"
                    alt=""
                  />
                </span>
              </div>
              <div class="rankingBox_rightA">
                获得{{ i.totalComis }}
                {{ i.sex == "1" ? "金币" : i.sex == "2" ? "宝石" : "" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div @click="hdgz">活动规则>></div>
      <p>本活动最终解释权归心动30秒所有</p>
    </div>
    <VantDialog v-model="show" width="80%" :show-confirm-button="false">
      <div class="wenan">
        1.
        被邀请人下载心动30秒，需在“系统设置-我绑定的邀请码”中填写邀请人专属邀请码，绑定成功即算邀请成功。<br />
        2.
        成功邀请用户，如对方充值可享受充值金额5%的宝石奖励。对方获得通话收益，你可再享通话收益10%的宝石奖励。<br />
        3. 邀请奖励宝石，实时到账，支持兑换。<br />
        4.
        邀请人不得通过批量机刷违规操作等方式获取宝石奖励，否则平台将不予发放或作永久封禁账号处理。<br />
        <p class="close" @click="hdgb">关闭</p>
      </div>
    </VantDialog>
  </div>
</template>

<script>
import marqueeLeft from "./marqueex.vue";
import {
  agentPromoteIndex,
  agentRewardList,
  agentRewardRecord,
  agentPromoteList,
  userUserinfo,
  agentMessage,
} from "@/api/reply";
import { Dialog } from "vant";
import "vant/lib/dialog/style";
import { getAppToken } from "@/utils/getAppToken";
export default {
  components: {
    marqueeLeft,
    VantDialog: Dialog.Component,
  },
  data() {
    return {
      show: false,
      lotteryAllList: [
        {
          userName: "小花",
          gemstone: 66,
          sex: 2,
        },
        {
          userName: "你的月亮",
          gemstone: 77,
          sex: 2,
        },
        {
          userName: "雪碧",
          gemstone: 88,
          sex: 2,
        },
        {
          userName: "周周",
          gemstone: 99,
          sex: 2,
        },
      ],
      curId: 0,
      items: [{ item: "你的收益" }, { item: "邀请人数" }, { item: "奖励排行" }],
      // contents: [{ item: "" }, { item: "邀请人数" }, { item: "奖励排行" }],
      //你的收益
      profitList: [],
      //邀请人数
      infoList: [],
      infoListA: [
        {
          imgA: require("../assets/image/zfb.png"),
          name: "可可爱爱1",
          img: require("../assets/image/nvIcon.png"),
          sisters: "妹妹",
          date: "2020-03-21",
        },
        {
          imgA: require("../assets/image/zfb.png"),
          name: "可可爱爱2",
          img: require("../assets/image/nvIcon.png"),
          sisters: "妹妹",
          date: "2020-03-21",
        },
        {
          imgA: require("../assets/image/zfb.png"),
          name: "可可爱爱3",
          img: require("../assets/image/nvIcon.png"),
          sisters: "妹妹",
          date: "2020-03-21",
        },
      ],
      classNum: "",
      //奖励排行
      agent: {},
      rankingList: [],

      promoteCode: "", //推广码
      sex: "", //性别（1：男   2：女）
      totalComis: "", //获得总收益（男性为金币  女性为宝石）
      totalPromote: "", //总推广人数
      todayCount: "", //今日推广人数
      eldSisterCount: "", //姐姐人数
      sisterCount: "", //妹妹人数
      todayReward: "", //今日收益
    };
  },
  methods: {
    //活动规则
    hdgz() {
      this.show = true;
    },
    hdgb() {
      this.show = false;
    },
    //分享链接
    shareLink() {
      let that = this;
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        window.android.shareLink(
          JSON.stringify({
            path: "http://secruit.dev.outsea.psychexy.com/#/MarketJump",
            code: `${that.promoteCode}`,
          })
        );
      } else if (isiOS) {
        window.webkit.messageHandlers.shareLink.postMessage(
          JSON.stringify({
            path: "http://secruit.dev.outsea.psychexy.com/#/MarketJump",
            code: `${that.promoteCode}`,
          })
        );
      }
    },
    //分享海报
    sharePosters() {
      let that = this;
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        window.android.sharePosters(
          JSON.stringify({
            path: "http://secruit.dev.outsea.psychexy.com/#/MarketJump",
            code: `${that.promoteCode}`,
          })
        );
      } else if (isiOS) {
        window.webkit.messageHandlers.sharePosters.postMessage(
          JSON.stringify({
            path: "http://secruit.dev.outsea.psychexy.com/#/MarketJump",
            code: `${that.promoteCode}`,
          })
        );
      }
    },
    //立即提现
    nowWithdrawal() {
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        window.android.nowtx();
      } else if (isiOS) {
        window.webkit.messageHandlers.nowtx.postMessage("nowWithdrawal");
      }
    },
    copyCode() {
      var Url2 = document.getElementById("inviteCode").innerText;
      var oInput = document.createElement("input");
      oInput.setAttribute("readonly", "readonly");
      oInput.value = Url2;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = "oInput";
      oInput.style.display = "none";
      alert("复制成功");
    },
    tab(index) {
      this.curId = index;
    },
    classBtn(id) {
      this.classNum = id;
      agentPromoteList({
        uid: id,
        lastId: 0,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 0) {
          this.infoListA = res.data.list;
        }
      });
    },
    //获取初始信息
    agentPromoteIndex() {
      agentPromoteIndex({}).then((res) => {
        if (res.code == 0) {
          this.promoteCode = res.data.promoteCode; //推广码
          this.todayReward = res.data.todayReward; //todayReward
          this.totalComis = res.data.totalComis; //获得总收益（男性为金币  女性为宝石）
          this.totalPromote = res.data.totalPromote; //总推广人数
          this.eldSisterCount = res.data.eldSisterCount; //姐姐人数
          this.sisterCount = res.data.sisterCount; //妹妹人数
          this.totalPromote = res.data.totalPromote; //总推广人数
          this.todayCount = res.data.todayCount; //今日推广人数
        }
      });
    },
    ////代理收益榜单H5
    agentRewardList() {
      agentRewardList({}).then((res) => {
        if (res.code == 0) {
          this.rankingList = res.data.list;
          this.agent = res.data.agent;
        }
      });
    },
    //我的代理收益记录h5
    agentRewardRecord() {
      agentRewardRecord({
        lastId: 0,
        pageSize: 500,
      }).then((res) => {
        if (res.code == 0) {
          this.profitList = res.data.list;
        }
      });
    },
    //查询用户推广记录h5
    agentPromoteList() {
      userUserinfo().then((res1) => {
        if (res1.code == 0) {
          agentPromoteList({
            uid: res1.data.id,
            lastId: 0,
            pageSize: 20,
          }).then((res) => {
            if (res.code == 0) {
              this.infoList = res.data.list;
            }
          });
        }
      });
    },
    //滚动信息
    getAgentMessage() {
      agentMessage().then((res) => {
        if (res.code == 0) {
          if (res.data.length != 0) {
            // console.log(res.data);
            this.lotteryAllList = res.data;
          }
        }
      });
    },
  },
  created() {
    getAppToken().then(() => {
      // localStorage.setItem(
      //   "access_token",
      //   "Bfo9flop4VNJ_HNPFTbbA_S-LspOt9U2FoSOE5C5ruE.6TmtdixRzL4ukjMON0cY0vDnxSpM7_RAzinNEqhwkbcFvTUb5wYyMHihVPp5YQw5jftfZ8fciWanskMqh87Z92Ow05v-4sZFcbwQxak8dHTEOQTZrM6yjtobJyeqv9OisYdfTc5lxrIEPFCsVMSybjQHoggGokTiaEXndf7v7L9P1MRQ3hTvIrvNJtgTVM6Pgs_gx8Kuo1_DmZaIExCHAA.a2qh1JiZgmOFvBy6NtO-os_JdzzktYUkSvqo9W68PUl72K0xbe4CN0SI3zdOpwvH"
      // );
      this.agentPromoteIndex();
      this.agentRewardList();
      this.agentRewardRecord();
      this.agentPromoteList();
      this.getAgentMessage();
    });
  },
  filters: {
    //时间转化
    time: (value) => {
      if (!value) return "";
      let value1 = value * 1000;
      var date = new Date(value1);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
  },
};
</script>

<style lang="less" scoped>
.InviteFriendsFemale {
  background: url("../assets/image/yaohaoyuuBg.png") no-repeat;
  background-size: cover;
  .yaoqingBox {
    height: 115px;
    width: 100%;
    display: flex;
    justify-content: center;
    img {
      width: 90%;
      position: relative;
      bottom: -35px;
      object-fit: contain;
    }
  }
  .liwuBox {
    height: 150px;
    display: flex;
    justify-content: center;
    position: relative;
    bottom: 175px;
    img {
      width: 70%;
      height: 508px;
      z-index: 9;
      object-fit: contain;
    }
  }
  .messageBox {
    width: 100%;
    overflow: hidden;
  }

  .locationBox {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0px 15px;
    bottom: 44px;
    z-index: 99;
    .shareRewards {
      background: white;
      border-radius: 4px;
      padding: 0px;
      width: 100%;
      border: 5px solid #f9f0ff;
      .shareRewards_text {
        display: flex;
        justify-content: center;
        // margin-bottom: 40px;
        background-color: #f9f0ff;
        // padding-top: 20px;
        padding-bottom: 5px;
        img {
          width: 70%;
          height: 100%;
          // object-fit:initial
        }
      }
      .shareRewards_grade {
        display: flex;
        justify-content: space-around;
        font-size: 12px;
        margin-bottom: 10px;
        .shareRewards_grade_one {
          width: 34%;
          height: 70px;
          background: url("../assets/image/1one.png") no-repeat;
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 15px 15px 0px 15px;
        }
        .shareRewards_grade_two {
          width: 34%;
          height: 70px;
          background: url("../assets/image/2two.png") no-repeat;
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 15px 15px 0px 15px;
        }
        .shareRewards_grade_three {
          width: 34%;
          height: 70px;
          background: url("../assets/image/3three.png") no-repeat;
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 15px 15px 0px 15px;
        }
        .shareRewards_grade_four {
          width: 34%;
          height: 70px;
          // background: url("../assets/image/4four.png") no-repeat;
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 15px 15px 0px 15px;
        }
      }
    }
  }
  .invitationCodeBox {
    background: white;
    border: 10px solid #f9f0ff;
    margin: 0px 15px;
    border-radius: 4px;
    padding: 15px 45px;
    position: relative;
    bottom: 29px;
    z-index: 20;
    .code {
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      color: #5e4236;
      background: #f9f0ff;
      border-radius: 25px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .code_span {
        font-size: 15px;
        font-weight: 700;
      }
      .inviteCode {
        font-size: 15px;
        font-weight: 700;
        margin: 0 5px;
      }
      #form_tone {
        width: 85px;
      }
      .code_button {
        width: 30px;
        display: inline-block;
        img {
          width: 30px;
        }
      }
    }
    .shareBox {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      text-align: center;
      .share_button {
        width: 90px;
        height: 30px;
        line-height: 30px;
        background: linear-gradient(90deg, #8f41e9 0%, #3e98e6 100%);
        color: white;
        border-radius: 25px;
        font-size: 12px;
      }
    }
  }
  #tab {
    margin: 0px 15px;
    border-radius: 4px;
    color: white;
    position: relative;
    bottom: 14px;
    padding-bottom: 6px;
  }
  .tab-bar {
    height: 30px;
    display: flex;
    justify-content: space-around;
    padding: 0px 5px;
  }
  .tab-bar a {
    width: 105px;
    height: 35px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 5px 5px 0px 0px;
    background-color: #9137f8;
    font-size: 14px;
  }
  .tab-bar .active {
    background-color: #fff;
    color: #9137f8;
  }
  .tab-con {
    width: 100%;
    height: 515px;
  }
  .tab-con .tab-con-div {
    height: 100%;
    background: white;
    margin-top: 5px;
    color: #333;
    border: 5px solid #f9f0ff;
    border-radius: 4px;
    overflow: auto;
    .profitBox {
      padding: 15px 15px 0px 15px;
      .profitBox_one {
        font-size: 12px;
        color: #999999;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        padding-bottom: 15px;
        .profitBox_one_1P {
          display: flex;
          span {
            color: #333333;
            margin: 0px 4px;
          }
          .profitBox_one_1P_img {
            padding-top: 2px;
            width: 17px;
            height: 17px;
          }
        }
        .profitBox_one_2P {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 5px;
          p {
            display: flex;
            span {
              color: #333333;
              margin: 0px 4px;
            }
            .profitBox_one_2P_img {
              padding-top: 2px;
              width: 17px;
              height: 17px;
            }
          }
          .profitBox_one_2P_btn {
            background: linear-gradient(
              126deg,
              #ffb14b 0%,
              #c170ff 0%,
              #4e60ff 100%
            );
            display: flex;
            justify-content: center;
            border-radius: 4px;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #ffffff;
          }
        }
      }
      .profitListBox {
        .profitListBox_P {
          background: #fbfbfc;
          padding: 5px 5px;
          line-height: 20px;
          font-size: 13px;
          color: #999999;
        }
        .profitListBox_div {
          display: flex;
          justify-content: space-between;
          font-size: 13px;
          margin: 15px 0px;
          color: #333333;
          .profitListBox_div_2p {
            display: flex;
            img {
              width: 17px;
              height: 17px;
              margin-left: 4px;
            }
          }
        }
      }
    }
    .yaoqingListBox {
      .yaoqingListBox_total {
        display: flex;
        justify-content: center;
        .yaoqingListBox_total_one {
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 90%;
          height: 30px;
          background: #f9f0ff;
          border-radius: 25px;
          margin-top: 15px;
          color: #502e19;
          font-size: 12px;
        }
      }
      .sisterGroupBox {
        border-bottom: 1px solid #f5f5f5;
        padding: 15px 0px;
        margin: 0px 20px;
        font-size: 13px;
        .sisterGroupBox_name {
          color: #333333;
          margin-bottom: 4px;
        }
        .sisterGroupBox_num {
          display: flex;
          justify-content: space-between;
          color: #999999;
        }
      }
      .infoBox {
        .infoBox_oneA {
          // border-bottom: 1px solid #f5f5f5;
          margin-top: 10px;
          padding: 0px 0px 0px 30px;
        }
        .infoBox_one {
          margin: 0px 20px;
          padding-bottom: 10px;
          border-bottom: 1px solid #f5f5f5;
          margin-top: 10px;
          .item {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            width: 100%;
          }
          .infoBox_one_img {
            display: flex;
            align-items: center;
            .imgA {
              width: 40px;
              height: 40px;
              border-radius: 25px;
              object-fit: cover;
              margin-right: 5px;
            }
            span {
              display: flex;
              font-size: 13px;
              .img {
                width: 12px;
                height: 12px;
                margin-left: 4px;
                padding-top: 4px;
              }
            }
          }
          .infoBox_one_imgA {
            display: flex;
            align-items: center;
            .imgA {
              width: 40px;
              height: 40px;
              object-fit: cover;
              border-radius: 25px;
              margin-right: 5px;
            }
            span {
              display: flex;
              font-size: 13px;
              .img {
                width: 12px;
                height: 12px;
                margin-left: 4px;
                padding-top: 4px;
              }
            }
          }
          .infoBox_one_name {
            text-align: center;
            color: #cccccc;
            .infoBox_one_name_1P {
              background: #ffe8e8;
              margin: 0px 6px;
              color: #ff6767;
              border-radius: 25px;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              margin-bottom: 4px;
            }
            .infoBox_one_name_1P1 {
              background: #ebeeff;
              margin: 0px 6px;
              color: #8da8ff;
              border-radius: 25px;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              margin-bottom: 4px;
            }
          }
          .infoBox_one_nameA {
            text-align: center;
            color: #cccccc;
            .infoBox_one_name_1P {
              background: #fff4de;
              margin: 0px 6px;
              color: #ffaf24;
              border-radius: 25px;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              margin-bottom: 4px;
            }
            .infoBox_one_name_1P1 {
              background: #ebeeff;
              margin: 0px 6px;
              color: #8da8ff;
              border-radius: 25px;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              margin-bottom: 4px;
            }
          }
        }
      }
    }
    .rankingBox {
      padding: 15px 15px 0px 15px;
      .rankingBox__one {
        display: flex;
        justify-content: space-between;
        background: linear-gradient(
          21deg,
          #9733ee 0%,
          #da22ff 54%,
          #9733ee 100%
        );
        border-radius: 3px;
        height: 50px;
        align-items: center;
        padding: 0px 15px;
        margin-bottom: 13px;
        .rankingBox_left {
          display: flex;
          align-content: center;
          .rankingBox_left_p {
            font-size: 20px;
            color: #ffffff;
            font-weight: 800;
          }
          .imgB {
            height: 30px;
            width: 30px;
          }
          .imgA {
            margin: 0px 10px 0px 13px;
            width: 30px;
            height: 30px;
            object-fit: cover;
            border-radius: 25px;
          }
          span {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: white;
            .img {
              width: 14px;
              height: 14px;
              margin-left: 4px;
              padding-top: 4px;
            }
          }
        }
        .rankingBox_right {
          color: #ffffff;
          font-size: 14px;
        }
      }

      .rankingBox__oneA {
        display: flex;
        justify-content: space-between;
        height: 50px;
        align-items: center;
        margin-bottom: 13px;
        .rankingBox_leftA {
          display: flex;
          align-content: center;
          .rankingBox_left_pA {
            font-size: 20px;
            color: #c4c0d5;
            font-weight: 800;
            width: 28px;
            text-align: center;
          }
          .imgA {
            margin: 0px 10px;
            width: 30px;
            object-fit: cover;
            height: 30px;
            border-radius: 25px;
          }
          span {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #333;

            .img {
              width: 14px;
              height: 14px;
              margin-left: 4px;
              padding-top: 3px;
            }
          }

          .rankingImg {
            width: 30px;
            height: 30px;
          }
        }
        .rankingBox_rightA {
          color: #999999;
          font-size: 14px;
        }
      }
    }
  }
  .footer {
    margin: 0px 15px;
    text-align: center;
    color: white;
    div {
      background: #b675ff;
      height: 40px;
      line-height: 40px;
      border-radius: 25px;
      color: white;
      font-size: 14px;
    }
    p {
      padding: 10px 0px;
      font-size: 13px;
    }
  }
  .kongBox {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    img {
      width: 100%;
    }
    p {
      text-align: center;
      margin-top: 5px;
      font-size: 13px;
      color: #cccccc;
    }
  }
  .phimg {
    width: 30px;
    height: 30px;
  }
  .close {
    text-align: center;
    color: #e56048;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #ccc;
    font-size: 15px;
  }
  .wenan {
    font-size: 14px;
    padding: 20px;
    padding-bottom: 10px;
  }
  .wenanbox {
    padding: 15px 15px 5px;
    font-size: 14px;
    p {
      padding-bottom: 10px;
      span {
        color: #9137f8;
      }
    }
  }
  .kongtxt {
    padding-top: 50px;
    font-size: 14px;
    text-align: center;
    .txt11 {
      text-decoration: underline;
      color: #9137f8;
      margin-right: 5px;
    }
  }
}
</style>